<template>
	<uni-nav-bar statusBar @clickLeft="back" @clickRight="toCreate" :shadow="false" :border="false" fixed
		left-icon="left" rightText="创建下线" title="我的团队" color="#ffffff" backgroundColor="#3c9cff" shadow />
	<view class="container">
		<view class="total">
			<template v-if="true">
				<uni-icons custom-prefix="iconfont" type="icon-wode_wodetuandui" color="#2979ff" size="20"></uni-icons>
				<view class="num">
					共 <text>{{myInviter}}</text> 人
				</view>
			</template>
		</view>

		<view class="list-wrap">
			<uni-section title="我的团队" type="line">
				<geek-list ref="list" :enabled="false" :api="fetchList" isPage>
					<block #default="{item}">
						<uni-list-item :title="item.sellerName" :note="`登录名：`+item.loginName">
							<template v-slot:header>
								<view class="slot-box">
									<up-avatar :text="item.firstName" fontSize="18" randomBgColor></up-avatar>
								</view>
							</template>
							<template v-slot:footer>
								<view class="footer" @click="$tab.navigateTo(`/pages_mine/pages/group/ratios?id=${item.id}`)">
									<up-text type="info" :text="item.phonenumber"></up-text>
									<up-text type="error" text="收益设置"></up-text>
								</view>
							</template>
						</uni-list-item>
					</block>
				</geek-list>
			</uni-section>
		</view>
	</view>
</template>

<script>
	import _ from 'lodash'
	import {
		myTeam
	} from '@/api/seller/myTeam.js'

	export default {
		data() {
			return {
				myInviter: '0'
			}
		},
		methods: {
			back() {
				this.$tab.navigateBack()
			},

			toCreate() {
				this.$tab.navigateTo('/pages_mine/pages/group/add')
			},

			fetchList(data = {}) {
				return myTeam(data).then(res => {
					const myTeams = res?.data?.myTeam || {}
					this.myInviter = _.get(myTeams, 'total', 0) || ''
					return {
						...myTeams,
						rows:_.map(myTeams.rows,vo => {
							return {
								...vo,
								joinTime:this.$u.timeFormat(vo.createTime,'yyyy年mm月dd日'),
								firstName:_.toUpper(_.first(vo.sellerName))
							}
						})
					}
				})
			}
		},
		onShow() {
			if (this.$refs?.list) {
				this.$refs.list.resetList()
			}
		},

		onReachBottom() {
			this.$refs.list.onScrollToLower()
		},

		//下拉刷新
		onPullDownRefresh() {
			this.$refs.list.resetList()
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;

		.total {
			background-color: #fff;
			padding: 50rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8rpx;
			margin-bottom: 24rpx;

			.num {
				margin-left: 24rpx;
				font-size: 30rpx;
				color: #666;

				text {
					font-size: 32rpx;
					color: #2979ff;
					margin: 0 10rpx;
					font-weight: bold;
				}
			}
		}
		
		.list-wrap{
			border-radius: 8rpx;
			overflow: hidden;
			//display: flex;
			//height:calc(100vh - 320rpx - var(--status-bar-height));
			background-color: #fff;
		}
		
		&::v-deep{
			.list-wrapper{
				.li-box{
					margin-top: 0 !important;
				}
			}
			
			.uni-section__content-title{
				font-weight:bold;
				font-size:30rpx !important;
				color:#000 !important;
			}
			
			.uni-list-item__content-title{
				font-weight:500;
				font-size:32rpx !important;
				color:#333 !important;
			}
			
			.uni-list-item__content-note{
				font-weight:400;
				font-size:28rpx !important;
				color:#999 !important;
			}
			
			.uni-list-item__container{
				align-items: center;
			}
			
			.uni-list-item__content{
				margin: 0 24rpx;
				flex:1;
				overflow: hidden;
			}
			
			.footer{
				.u-text{
					justify-content: flex-end !important;
				}
			}
		}
	}
</style>